<template>
  <div class="search-input">
    <!-- 搜索框 -->
    <el-input placeholder="请输入内容" size="small" v-model.trim="searchWord" @keyup.enter.native="search" v-popover:popover >
      <!-- 搜索按钮 -->
      <span slot="suffix" class="el-icon-search" @click="search"></span>
    </el-input>
    <!-- 热搜弹出框 -->
    <el-popover ref="popover" placement="bottom" width="350" trigger="focus">
      <div class="list">
        <!-- 搜索历史部分 -->
        <div class="history" v-if="historySearch.length != 0">
          <div class="hd" >
            <h3>搜索历史</h3>
            <span class="iconfont icon-delete" @click="dropAll">清空</span>
          </div>
          <div class="bd">
              <el-tag v-for="(word,index) in historySearch" :key="index" effect="plain" closable @click="addHotWord(word)" @close="dropHistorySearch(index)"> {{word}}</el-tag>
          </div>
        </div>
        <!-- 热搜列表 -->
        <div class="hot-search-rank hot-search-pop">
            <h3>热搜榜</h3>
            <ul>
              <li v-for="(item,index) in hotSong" :key="item.index" @click="addHotWord(item.searchWord)">
                <div class="num" :class="index < 3 ?'hotword-num' :''">{{index + 1}}</div>
                <div class="main-content">
                    <div class="word">
                        <span>{{item.searchWord}}</span>
                        <span class="by" :class="index < 3 ? 'hotword':''">{{item.score}}</span>
                        <span v-if="item.iconUrl" class="icon">
                          <img :src="item.iconUrl" alt=""/>
                        </span>
                    </div>
                    <p class="by" v-if="item.content">{{item.content}}</p>
                </div>
              </li>
            </ul>
        </div>
      </div>
    </el-popover>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      searchWord:'', // 搜索关键词
      hotSong:[],
      // 搜索历史
      historySearch:this.getItem("historySearch") ? this.getItem("historySearch") : [],
    };
  },
   created() {
    // 获取热搜歌曲
    this.getSearchHotWordBy();
  },
  methods: {
    // 搜索时间
    search(){
      if(this.searchWord == ''){
          this.$message({
            showClose: true,
            message: "请输入内容",
            type: "warning",
            center: true,
          });
      }
      this.$refs.popover.doClose();// 关闭弹窗
      this.$router.push('/searchdetail/' + this.searchWord)
       // 添加搜索历史
      this.addHistory(this.searchWord);
    },
    async getSearchHotWordBy(){
      // 发送请求
      let resHotSong = await this.$API.searchdetail.getSearchHotWord();
      if(resHotSong.code == 200){
        this.hotSong = resHotSong.data
      }
    },
    // 点击热搜歌曲进行搜索
    addHotWord(searchWord){
      // 关闭热搜榜
      this.$refs.popover.doClose();// 关闭弹窗
      this.searchWord = searchWord;
      this.$router.push('/searchdetail/' + this.searchWord);
      // 添加搜索历史
      this.addHistory(searchWord);
    },
    // 添加搜索历史
    addHistory(searchWord){
      if(!this.historySearch.includes(searchWord)){
        this.historySearch.push(searchWord);
        this.setItem('historySearch',this.historySearch)
      }
    },
    dropHistorySearch(index){
      this.historySearch.splice(index,1);
      this.setItem('historySearch',this.historySearch)
    },
    dropAll(){
      this.removeItem('historySearch')
      this.historySearch = [];

    }
  },
 
};
</script>
<style lang="less" scoped>
.search-input {
  position: relative;
  display: flex;
  align-items: center;
  .el-icon-search{
    cursor: pointer;
    padding-top: 10px;
    &:hover{
        color: var(--themeColor);
        font-weight: 700;
    }
  }
}
.list{
  width: 350px;
  height: 450px;
  overflow-y: scroll;
  margin: 5px 5px;
}

.hot-search-rank{
  cursor: pointer;
  background: #fff;
  li{
    display: flex;
    align-items: center;
    padding: 10px 5px;
    .num{
      width: 30px;
      padding-left: 5px;
    }
    .hotword-num{
      color: red;
      font-weight: 900;
    }
    .main-content{
      .word{
        span{
          padding-right: 10px;
        }
       .hotword{
          color: red;
          font-weight: 900;
        }
        .icon{
          display: inline-block;
          width: 30px;
          height: 20px;
          img{
            width: 100%;
          }
        }
      }
      p{
        padding-top: 5px;
      }
      
    }
    
  }
  li:hover{
      background: rgba(200, 220, 220, 0.4);
    }
}
.history{
  .hd{
    display: flex;
    align-items: center;
    h3{
      margin-right: 10px;
    }
    .icon-delete{
      font-size: 13px;
      &:hover{
        color: var(--themeColor);
        cursor: pointer;
      }
    }
  }
  .bd{
    margin-top: 10px;
    .el-tag{
      margin: 10px 5px ;
    }
  }
}
</style>